<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2310709_9hf37riauq.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/detail.css">
    <script src="./js/detail.js"></script>
    <script src="./libs/jquery-validation/jquery.validate.js"></script>
    <script src="./libs/layer/layer.js"></script>
</head>

<body>
    <!-- 头部菜单 -->
    <header>
        <div id="header-menu">
            <div class="header main">
                <ul>
                    <li>您好,欢迎光临凡客诚品！</li>
                    <li><a href="">登录</a></li>
                    <li>|</li>
                    <li><a href="">注册</a></li>
                    <li><a href="">我的订单</a></li>
                    <li><i class="iconfont icon-yinliang"></i> 网站公告</li>
                    <li>
                        <span class="top-qr"></span>
                        <span></span>
                        <img class="top-qr-img" src="./img/top-qr.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <!-- 搜索框/购物车 -->
        <div id="search">
            <div class="vanksearch main">
                <div class="searchbox fr">
                    <div class="searcharea">
                        <input type="text" placeholder="搜“卫衣”，体验与众不同">
                        <span class="searchbtn">搜索</span>
                        <span class="buycar"><i class="iconfont icon-gouwuche1"></i> <a href="./buycar.html"">购物车</a>
                            <div class=" lists">
                                <table>
                                    <thead>
                                        <tr>
                                            <td>空空如也,不妨先去选购商品>></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                    </div>
                            <em></em>
                        </span>
                    </div>
                    <p class="friendlink">
                        <span>热门搜索:</span>
                        <a href="">免烫衬衫</a>
                        <a href="">外套</a>
                        <a href="">针织衫</a>
                        <a href="">卫衣</a>
                        <a href="">休闲裤</a>
                        <a href="">帆布鞋</a>
                        <a href="">羽绒服</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 菜单导航 -->
        <div id="nav">
            <div class="nav main">
                <a href="./index.html" class="logo"></a>
                <ul class="nav-list">
                    <li>首页</li>
                    <li>摇粒绒<i class="iconfont icon-hot"></i>
                        <ul>
                            <li>摇粒绒</li>
                            <li>仿羊羔绒</li>
                        </ul>
                    </li>
                    <li>商务衬衫<i class="iconfont icon-hot"></i>
                        <ul>
                            <li>长袖免烫</li>
                            <li>舒适商务</li>
                            <li>高支衬衫</li>
                            <li>短袖免烫</li>
                            <li>短袖桑蚕丝</li>
                        </ul>
                    </li>
                    <li>休闲衬衫
                        <ul>
                            <li>牛津纺</li>
                            <li>法兰绒</li>
                            <li>灯芯绒</li>
                            <li>水洗棉</li>
                            <li>易打理</li>
                            <li>麻棉系列</li>
                            <li>复古风系列</li>
                            <li>女款</li>
                            <li>短袖休闲衬衫</li>
                        </ul>
                    </li>
                    <li>卫衣
                        <ul>
                            <li>时尚款</li>
                            <li>开衫</li>
                            <li>圆领</li>
                            <li>连帽</li>
                        </ul>
                    </li>
                    <li>外套<i class="iconfont icon-hot"></i>
                        <ul>
                            <li>羽绒服</li>
                            <li>大衣</li>
                            <li>夹克</li>
                            <li>西服</li>
                            <li>摇粒绒</li>
                            <li>冲锋衣</li>
                        </ul>
                    </li>
                    <li>针织衫
                        <ul>
                            <li>圆领</li>
                            <li>V领开衫</li>
                            <li>polo领</li>
                            <li>高领</li>
                            <li>开衫</li>
                        </ul>
                    </li>
                    <li>裤装
                        <ul>
                            <li>牛仔裤</li>
                            <li>休闲裤</li>
                            <li>针织裤</li>
                            <li>运动系列</li>
                            <li>沙滩裤</li>
                            <li>短裤</li>
                            <li>半裙</li>
                        </ul>
                    </li>
                    <li>鞋
                        <ul>
                            <li>帆布鞋</li>
                            <li>休闲鞋</li>
                            <li>运动鞋</li>
                            <li>凉鞋</li>
                            <li>皮鞋</li>
                            <li>靴子</li>
                            <li>女鞋</li>
                        </ul>
                    </li>
                    <li>家居配饰
                        <ul>
                            <li>袜品</li>
                            <li>内衣</li>
                            <li>家居服</li>
                            <li>连裤袜</li>
                            <li>家居鞋</li>
                            <li>床品件套</li>
                            <li>毯</li>
                            <li>被</li>
                            <li>围巾</li>
                            <li>枕</li>
                            <li>抱枕</li>
                            <li>手机壳</li>
                            <li>箱包</li>
                            <li>裙装</li>
                            <li>马甲</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 侧边滚动条 -->
    <section>     
        <div id="scrollbar">
            <div class="scrollbar">
                <div class="service">
                    <div class="scroll-1">
                        <span>联系客服</span>
                    </div>
                    <div class="scroll-2">
                        <span>凡客会员</span>
                    </div>
                    <div class="scroll-3">
                        <span>倒计时</span>
                    </div>
                    <div class="scroll-4">
                        <span>消息</span>
                    </div>
                    <div class="scroll-5">
                        <span>优惠券</span>
                    </div>
                    <div class="scroll-6">
                        <span>购物车</span>
                    </div>
                </div>
            </div>
            <div class="totop">
                <div class="scrollqr">
                    <span>联系客服</span>
                </div>
                <div class="write">
                    <span>建议</span>
                </div>
                <div class="backtop"></div>
            </div>
        </div>
    </section>

    <!-- 主体内容 放大镜 详情 -->
    <section>
        <div id="content">
            <!-- 头部标题 -->
            <p class="route main">
                <a href="">首页</a>
                <span>></span>
                <a href="">男装</a>
                <span>></span>
                <a href="">夹克</a>
                <span>></span>
                <span>仿羊羔绒 立领夹克 宽松版</span>
            </p>
            <div class="product-intro main">
                <div id="title">
                    <h6 class="fl">仿羊羔绒 立领夹克 宽松版  </h6>
                    <p class="fr">
                        <a href="">产品描述</a>
                        <span>|</span>
                        <a href="">评论</a>
                        <span>|</span>
                        <a href="">提问</a>
                    </p>
                </div>

                <!-- 放大镜 -->
                <div class="preview fl">
                    <div class="pre-zoom">
                        <!-- 预览盒子 -->
                        <img src="./img/detail-slideshow/2-1.jpg" alt="" class="midimg">
                        <div class="midbox"></div>
                    </div>
                    <div class="pre-nav">
                        <!-- 小图上下导航 -->
                        <span>▲</span>
                        <span>▼</span>
                    </div>
                    <div class="preview-icon">
                        <!-- 小图盒子 -->
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <!-- 放大盒子 -->
                    <div class="pre-bigzoom">
                        <img class="bigimg" src="./img/detail-slideshow/3-1.jpg" alt="">
                    </div>
                </div>

                <!-- 产品详情 -->
                <div class="itemInfo fl">
                    <p>特惠价: ¥<span class="price"> 378.00</span><span>充值后相当于: ¥189.00</span></p>
                    <p class="chongzhi"><a href=""></a>充100返100,点击充值</a></p>
                    <div class="selec-color">
                        <p>颜色:</p>
                        <ul>
                            <li>黑色</li>
                            <li>卡其色</li>
                        </ul>
                    </div>
                    <div class="selec-size">
                        <p class="fl">尺码:</p>
                        <ul class="fl">
                            <li>M</li>
                            <li>L</li>
                            <li>XL</li>
                            <li>XXL</li>
                        </ul>
                    </div>
                    <div class="selec-num">
                        <p>数量:</p>
                        <select name="selec-num" id="selec-num">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div class="seleced-inner">
                        <p>已选:</p>
                        <span></span>
                        <span></span>
                        <span class="stock">现在有货</span>
                    </div>
                    <div class="buynow">
                        <span>立即购买</span>
                        <span class="insertcart"></span>
                    </div>
                    <span class="discounttips">
                        <h4>
                            <span>优惠提示</span>
                        </h4>
                        <ul>
                            <li>
                                <span>可选满赠</span>
                                <span>满198加9元送发热内衣</span>
                            </li>
                            <li>
                                <span>可选满赠</span>
                                <span>满198加1元送袜品</span>
                            </li>
                            <li>
                                <span>免邮</span>
                                <span>全场购物满199元免运费</span>
                            </li>
                            <li>
                                <span>优惠券</span>
                                <span>满200减20</span>
                                <span>满1000减150</span>
                                <span>新人有礼</span>
                            </li>
                        </ul>
                    </span>
                </div>
            </div>
            <div class="content main"></div>
        </div>
        </div>
    </section>

    <!-- 底部 -->
    <footer>
        <div id="footer">
            <div class="fot-top main">
                <ul>
                    <li><a href="">
                            <p class="onlinelogo"><img src="./img/kefu.png" alt=""></p>
                            <p class="onlinekefu">7X9小时在线客服</p>
                        </a></li>
                    <li><a href="">
                            <p class="seven"><img src="./img/seven.png" alt=""></p>
                            <p>7天内退货</p>
                            <p>购物满199元免运费</p>
                        </a></li>
                    <li>
                        <p class="qr"><img src="./img/QR.jpg" alt=""></p>
                        <p>扫码下载<span>凡客</span>客户端</p>
                    </li>
                </ul>
                <ul>
                    <li><a href="">关于凡客</a></li>
                    <li><a href="">新手指南</a></li>
                    <li><a href="">配送范围及时间</a></li>
                    <li><a href="">支付方式</a></li>
                    <li><a href="">售后服务</a></li>
                    <li><a href="">帮助中心</a></li>
                </ul>
            </div>
            <div class="fot-bot main">
                <hr>
                <p>Copyright 2007 - 2020 vancl.com All Rights Reserved<a href="">京ICP备08000757号</a>京公网安备11011502002400号
                    出版物经营许可证新出发京批字第直110138号</p>
                <p>凡客诚品（北京）科技有限公司</p>
                <p class="fot-link">
                    <span class="costumeOrg"></span>
                    <a href="" class="vanclMsg"></a>
                    <a href="" class="vanclqingNian"></a>
                </p>

            </div>
        </div>
    </footer>
</body>

</html>